﻿@*
    供应商管理页面
*@
@{
    ViewData["Title"] = "供应商管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>供应商管理</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <style>
        .layui-form-item .layui-input-inline {
            width: 180px;
        }

        .layui-table-tool-temp {
            padding-right: 120px;
        }

        .layui-btn-container {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    @Html.AntiForgeryToken()
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 错误消息显示 -->
                @if (TempData["ErrorMessage"] != null)
                {
                    <div class="layui-bg-red" style="padding: 10px; margin-bottom: 15px; border-radius: 2px;">
                        <i class="layui-icon layui-icon-close-fill"></i> @TempData["ErrorMessage"]
                    </div>
                }

                <!-- 搜索栏 -->
                <form class="layui-form" lay-filter="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">供应商编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="supplierCode" placeholder="请输入供应商编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">供应商名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="supplierName" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">供应商简称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="supplierShortName" placeholder="请输入供应商简称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">英文名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="englishName" placeholder="请输入供应商英文名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">是否启用</label>
                            <div class="layui-input-inline">
                                <select name="isNo">
                                    <option value="2">全部</option>
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i> 搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn">
                                <i class="layui-icon layui-icon-refresh"></i> 重置
                            </button>
                        </div>
                    </div>
                </form>

                <!-- 表格工具栏 -->
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="addNewBtn"><i class="layui-icon">&#xe654;</i> 新增</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="editBtn"><i class="layui-icon">&#xe642;</i> 修改</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="deleteBtn"><i class="layui-icon">&#xe640;</i> 删除</button>
                </div>

                <!-- 数据表格 -->
                <table id="supplierTable" lay-filter="supplierTable"></table>

                <!-- 操作列模板 -->
                <script type="text/html" id="operationTpl">
                    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">修改</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
                </script>

                <!-- 是否启用模板 -->
                <script type="text/html" id="isNoTpl">
                    {{# if(d.isNo == 1){ }}
                    <span class="layui-badge layui-bg-green">是</span>
                    {{# } else { }}
                    <span class="layui-badge layui-bg-gray">否</span>
                    {{# } }}
                </script>
            </div>
        </div>
    </div>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function() {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 渲染表格
            table.render({
                elem: '#supplierTable',
                url: '/Supplier/GetSupplierList', // 后端数据接口
                page: true, // 开启分页
                limit: 4, // 默认每页显示条数
                limits: [4, 6, 8, 10], // 每页条数选择项
                toolbar: true, // 开启工具栏
                defaultToolbar: [], // 工具栏右侧图标
                cols: [[ // 表头
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'supplierCode', title: '供应商编码', width: 120},
                    {field: 'supplierName', title: '供应商名称', width: 180},
                    {field: 'supplierGrade', title: '供应商等级', width: 100},
                    {field: 'supplierScore', title: '供应商评分', width: 100},
                    {field: 'supplierPhone', title: '供应商电话', width: 120},
                    {field: 'isNo', title: '是否启用', width: 90, templet: '#isNoTpl'},
                    {field: 'context', title: '备注', width: 200},
                    {title: '操作', width: 120, toolbar: '#operationTpl', fixed: 'right'}
                ]],
                request: {
                    pageName: 'pageIndex', // 页码的参数名称，默认：page
                    limitName: 'pageSize' // 每页数据量的参数名，默认：limit
                },
                response: {
                    statusCode: 0 // 成功的状态码，默认：0
                },
                parseData: function(res) { // 将原始数据解析成table组件所规定的数据
                    console.log("表格数据:", res.data); // 调试输出

                    // 确保每行数据都有id字段（无论后端返回的是Id还是id）
                    if(res.data && res.data.length > 0) {
                        res.data.forEach(function(item) {
                            item.id = item.id || item.Id; // 确保有小写的id字段
                        });
                    }
                    
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                }
            });

            // 监听行工具事件（单删）
            table.on('tool(supplierTable)', function(obj){
                var data = obj.data;
                console.log("行数据:", data); // 调试输出
                var id = data.id || data.Id; // 兼容不同命名规则
                
                if(obj.event === 'delete'){
                    layer.confirm('确认要删除该供应商吗?', function(index){
                        // 执行单个删除
                        $.ajax({
                            url: '/Supplier/DeleteSupplier',
                            type: 'POST',
                            data: { id: id },
                            success: function(res){
                                if(res.code === 0){
                                    layer.msg('删除成功');
                                    obj.del(); // 删除对应行（tr）的DOM结构
                                }else{
                                    layer.msg(res.msg || '删除失败');
                                }
                            },
                            error: function(){
                                layer.msg('服务器错误，删除失败');
                            }
                        });

                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    // 检查ID是否有效
                    if (!id || id <= 0) {
                        layer.msg('无效的供应商ID: ' + id, {icon: 2});
                        return;
                    }
                    
                    console.log("跳转编辑，ID:", id); // 调试输出
                    
                    // 跳转到编辑页面
                    window.location.href = '/Supplier/Edit?id=' + id;
                }
            });

            // 搜索按钮点击事件
            form.on('submit(searchBtn)', function(data) {
                // 执行搜索重载
                table.reload('supplierTable', {
                    page: {
                        curr: 1 // 重新从第一页开始
                    },
                    where: data.field // 搜索条件
                });
                return false; // 阻止表单跳转
            });

            // 重置按钮点击事件
            $('#resetBtn').on('click', function() {
                // 重置表单
                $('form[lay-filter="searchForm"]')[0].reset();
                form.val('searchForm', {
                    'isNo': 2
                });

                // 重新加载表格，确保使用默认值查询
                table.reload('supplierTable', {
                    page: {
                        curr: 1 // 重新从第一页开始
                    },
                    where: {
                        isNo: 2 // 明确设置为"全部"
                    }
                });
            });

            // 批量删除按钮点击事件
            $('#deleteBtn').on('click', function(){
                var checkStatus = table.checkStatus('supplierTable');
                var data = checkStatus.data;

                if(data.length === 0){
                    layer.msg('请选择要删除的数据');
                    return;
                }

                layer.confirm('确认要删除选中的 ' + data.length + ' 条数据吗?', function(index){
                    // 获取所有选中的ID，兼容不同命名规则
                    var ids = data.map(function(item){
                        return item.id || item.Id;
                    });
                    
                    console.log("批量删除IDs:", ids); // 调试输出

                    // 执行批量删除
                    $.ajax({
                        url: '/Supplier/BatchDelete',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(ids),
                        success: function(res){
                            if(res.code === 0){
                                layer.msg('批量删除成功');
                                // 重载表格
                                table.reload('supplierTable');
                            }else{
                                layer.msg(res.msg || '批量删除失败');
                            }
                        },
                        error: function(){
                            layer.msg('服务器错误，批量删除失败');
                        }
                    });

                    layer.close(index);
                });            });

            // 新增按钮点击事件
            $('#addNewBtn').on('click', function(){
                // 跳转到新增页面
                window.location.href = '/Supplier/Add';
            });
            
            // 编辑按钮点击事件（批量编辑按钮）
            $('#editBtn').on('click', function(){
                var checkStatus = table.checkStatus('supplierTable');
                var data = checkStatus.data;
                
                if(data.length !== 1){
                    layer.msg('请选择一条记录进行修改');
                    return;
                }

                // 获取ID（兼容不同命名）
                var id = data[0].id || data[0].Id;
                
                if (!id || id <= 0) {
                    layer.msg('无效的供应商ID: ' + id, {icon: 2});
                    console.error("无效ID，数据:", data[0]);
                    return;
                }
                
                console.log("批量操作-跳转编辑，ID:", id); // 调试输出
                
                // 跳转到编辑页面
                window.location.href = '/Supplier/Edit?id=' + id;
            });
            
        });
    </script>
</body>
</html>
